<template>
    <!-- 酒店房间详细信息 -->
    <view class="room-page">
        <view class="room-page-give">
            <view class="give-logo">
                <view v-for="(item, index) in roomDetail.quickFeatures" :key="index">
                    <text>{{ item }}</text>
                </view>
            </view>
            <view class="give-info">
                <view class="section">
                    <view v-for="(item, index) in roomDetail.giftItems" :key="index">
                        <text class="info-item" :class="item === '赠送项目：' ? 'info-item-bold' : ''">{{ item === '赠送项目：' ? $t('productDetail.room.giftItems') : item }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="room-page-tabs" v-if="tabs">
            <view
                v-for="item in tabs"
                :key="item.key"
                class="tab-item"
                :class="{ 'active': activeTab === item.key }"
                @tap="switchTab(item.key)"
            >
                {{ item.label }}
            </view>
        </view>
        <view v-if="activeTab === '1' && roomDetail.facilities" class="section section-bottom">
            <view v-for="(facility, index) in roomDetail.facilities" :key="index" class="facility">
                <view class="facility-title">
                    <image v-if="facility.icon" :src="facility.icon" class="facility-title-icon" mode="aspectFit" />
                    <text :class="facility.icon ? '' : 'with-dot'">{{ facility.title }}</text>
                </view>
                <view class="facility-content">
                    <view v-for="(contentItem, contentIndex) in facility.items" :key="contentIndex" class="facility-item">
                        <text>{{ contentItem }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="activeTab === '2'" class="section section-bottom">
            <view v-for="(notice, index) in roomDetail.notices" :key="index" class="facility">
                <view class="facility-title">
                    <image v-if="notice.icon" :src="notice.icon" class="facility-title-icon" mode="aspectFit" />
                    <text :class="notice.icon ? '' : 'with-dot'">{{ notice.title }}</text>
                </view>
                <view>
                    <view v-for="(contentItem, contentIndex) in notice.items" :key="contentIndex" class="facility-item">
                        <text>{{ contentItem }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="activeTab === '3'" class="section section-bottom">
            <view v-for="(fee, index) in roomDetail.fees" :key="index" class="facility">
                <view class="facility-title">
                    <image v-if="fee.icon" :src="fee.icon" class="facility-title-icon" mode="aspectFit" />
                    <text :class="fee.icon ? '' : 'with-dot'">{{ fee.title }}</text>
                </view>
                <view>
                    <view v-for="(contentItem, contentIndex) in fee.items" :key="contentIndex" class="facility-item">
                        <text>{{ contentItem }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'RoomDetail',
    props: {
        roomDetail: {
            type: Object,
            default: () => ({}),
        }
    },
    data() {
        return {
            tabs: [
                {
                    label: this.$t('productDetail.tabs.facilities'),
                    key: '1'
                },
                {
                    label: this.$t('productDetail.tabs.bookingNotice'),
                    key: '2'
                },
                {
                    label: this.$t('productDetail.tabs.feeNotice'),
                    key: '3' 
                }
            ],
            activeTab: '1'
        }
    },
    methods: {
        switchTab(key) {
            if (this.activeTab === key) return;
            this.activeTab = key;
        }
    }
}
</script>

<style lang="scss" scoped>
.room-page {
    &-give {
        margin-top: -30rpx;
        .give-logo {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 132rpx;
        }
        .give-info {
            padding: 0 30rpx 30rpx;
            .info-item {
                font-size: $uni-font-size-sm;
                &-bold {
                    font-size: $uni-font-size-base;
                    font-weight: bold;
                }
            }
        }
    }
    &-tabs {
        display: flex;
        justify-content: space-around;
        border-bottom: 1rpx solid #eee;
        background-color: #fff;
        .tab-item {
            padding: 20rpx 0;
            font-size: 28rpx;
            color: #666;
            &.active {
                color: #498FFF;
                font-weight: bold;
                border-bottom: 4rpx solid #498FFF;
            }
        }
    }
    .section {
        padding: 30rpx;
        background-color: #fff;
        &-bottom {
            margin-bottom: 30rpx;
        }
    }
    .facility {
        margin-bottom: 20rpx;
        &-title {
            font-size: $uni-font-size-lg;
            font-weight: bold;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            gap: 10rpx;
            &-icon {
                width: 30rpx;
                height: 30rpx;
            }
        }
        &-content {
            display: flex;
            flex-wrap: wrap;
            gap: 10rpx;
            .facility-item {
                display: flex;
                align-items: center;
                gap: 10rpx;
                width: calc(50% - 30rpx);
                box-sizing: border-box;
                font-size: $uni-font-size-sm;
            }
        }
        &-item {
            font-size: $uni-font-size-sm;
        }
    }
    .with-dot {
        position: relative;
        padding-left: 20rpx;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10rpx;
            height: 10rpx;
            background-color: #ccc;
            border-radius: 50%;
        }
    }
}
</style>